<template>
        <div>
            <h4>teleport组件</h4>
            <div class="com-box" >
                <!-- 注意：要插入的目标元素不能在teleport所在同一个组件中 -->
                <Teleport to="body">
                    <Dialog/>
                </Teleport>
            </div>
        </div>
</template>
    
<script setup lang='ts'>
import Dialog from '../components/dialog.vue'
    // Teleport Vue 3.0新特性之一。

// Teleport 是一种能够将我们的模板渲染至指定DOM节点，
// 不受父级style、v-show等属性影响，但data、prop数据依旧能够共用的技术；
// 类似于 React 的 Portal。
// 主要解决的问题 因为Teleport节点挂载在其他指定的DOM节点下，完全不受父级style样式影响

</script>
    
<style lang="less">
    #tele-wrap {
        width: 100px;
        height: 60px;
        position: relative;
        background-color: red;
    }
    .tele-box {
        width: 100px;
        height: 60px;
        position: relative;
        background-color: rgb(64, 184, 46);
    }
    .com-box {
        width: 100px;
        height: 60px;
        position: relative;
        background-color: rgb(166, 238, 42);
    }
</style>